<template>
  <view class="container">
    <!-- 首页标题栏 -->
    <uni-section class="mb-10" title="首页" titleFontSize="16">
      <template v-slot:right>
        <view @click="handleScan">
          <uni-icons type="scan" size="25"></uni-icons>
        </view>
      </template>
    </uni-section>
    
    <!-- 搜索栏 -->
    <my-search @click="gotoSearch"></my-search>
    
    <!-- 轮播图 -->
    <my-swiper></my-swiper>
    
    <!-- 快捷菜单 -->
    <view class="menu">
      <navigator class="menu-item" hover-class="menu-item-hover" url="/subpkg/book_store/book_store">
        <image class="menu-icon" src="/static/icon/book.png" mode="aspectFit"></image>
        <view class="menu-text">书城</view>
      </navigator>
      <view class="menu-item" @click="showComingSoon('听书')">
        <image class="menu-icon" src="/static/icon/listen.png" mode="aspectFit"></image>
        <view class="menu-text">听书</view>
      </view>
      <view class="menu-item" @click="showComingSoon('报纸')">
        <image class="menu-icon" src="/static/icon/news.png" mode="aspectFit"></image>
        <view class="menu-text">报纸</view>
      </view>
      <navigator class="menu-item" hover-class="menu-item-hover" url="/subpkg/cate/cate">
        <image class="menu-icon" src="/static/icon/cate.png" mode="aspectFit"></image>
        <view class="menu-text">分类</view>
      </navigator>
    </view>
    <!-- 排行榜 -->
    <book-ranking-list></book-ranking-list>

    <!-- 推荐内容区块 -->
    <my-recommend 
      v-for="(item, index) in recommendList" 
      :key="index" 
      :title="item.title" 
      :type="item.type"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      recommendList: [
        { title: '为你推荐', type: 'recommend' },
        { title: '精品数据库', type: 'premium' },
        { title: '猜你喜欢', type: 'guess' },
        { title: '大家正在读', type: 'popular' },
        { title: '热门推荐', type: 'hot' },
        { title: '发现好书', type: 'discovery' }
      ]
    }
  },
  methods: {
    gotoSearch() {
      uni.navigateTo({
        url: '/subpkg/search/search'
      })
    },
    
    // 新增扫一扫功能
    handleScan() {
      uni.scanCode({
        onlyFromCamera: true, // 只允许从相机扫码
        scanType: ['barCode', 'qrCode'], // 扫码类型
        success: (res) => {
          console.log('扫码结果:', res.result);
          uni.showToast({
            title: '扫码成功',
            icon: 'success'
          });
          // 这里可以处理扫码结果，比如跳转到对应页面
          // this.handleScanResult(res.result);
        },
        fail: (err) => {
          console.error('扫码失败:', err);
          uni.showToast({
            title: '扫码失败，请重试',
            icon: 'none'
          });
        }
      });
    },
    
    // 显示功能即将上线提示
    showComingSoon(feature) {
      uni.showToast({
        title: `${feature}功能即将上线`,
        icon: 'none',
        duration: 2000
      });
    },
    
    // 处理扫码结果（可根据实际需求实现）
    handleScanResult(result) {
      // 示例：如果是ISBN码，跳转到书籍详情
      if (/^\d{13}$/.test(result)) {
        uni.navigateTo({
          url: `/subpkg/book_detail/book_detail?isbn=${result}`
        });
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  padding-bottom: 20rpx;
}

.menu {
  display: flex;
  background-color: #FFFFFF;
  height: 160rpx;
  justify-content: space-around;
  padding: 20rpx 0;
  border-radius: 16rpx;
  margin: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 25%;
    
    &-hover {
      opacity: 0.7;
      transform: scale(0.95);
    }

    .menu-icon {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 12rpx;
    }

    .menu-text {
      font-size: 26rpx;
      color: #333;
    }
  }
}

// 扫描图标点击效果
.uni-icons[type="scan"] {
  padding: 10rpx;
  &:active {
    opacity: 0.6;
  }
}
</style>